import { ref, toRef, toRefs, isRef, watch, reactive } from 'vue'
export default class Element {
  constructor() {
    this.list = []
    this.list2 = ref([])
    this.list3 = reactive([])
    this.list_ref = toRef(this, 'list')
    this.list_ref2 = toRef(this, 'list3')

    watch(
      this.list_ref,
      (newValue) => {
        console.log(`改变了`, newValue)
      },
      {
        deep: true
      }
    )

    watch(
      this.list_ref2,
      (newValue) => {
        console.log(`改变了list_ref2`, newValue)
      },
      {
        deep: true
      }
    )

    watch(
      this.list2,
      (newValue) => {
        console.log(`newValue`, newValue)
      },
      {
        deep: true
      }
    )
  }
  add(item) {
    //this.list.push(item)
    //这种有响应式
    //this.list_ref2.value.push(item)
    this.list_ref.value.push(item)
    this.list2.value.push(999)
    this.list_ref2.value.push(888)
    console.log(this.list_ref.value, this.list)
  }
  reset() {
    this.list = []
  }
}
